let _Vue = null

export default class HashRouter {
  static install (Vue) {
    // 判断当前插件是否安装
    if (HashRouter.install.installed) {
      return
    }
    HashRouter.install.installed = true
    // 把Vue实例记录到全局变量
    _Vue = Vue
    // 把创建Vue实例的时候传入的router对象挂到Vue实例
    _Vue.mixin({
      // 会合并到vue实例化时的beforeCreate上
      beforeCreate () {
        // this为Vue构造函数
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
          this.$options.router.init()
        }
      }
    })
  }

  constructor (options) {
    // 路由配置
    this.options = options.routes
    // 路由和组件的对应关系
    this.routeMap = {}
    // 记录当前地址，并转成响应式，当路由变化时，可以自动更新组件，与vue是强绑定关系
    this.data = _Vue.observable({
      current: '/'
    })
  }

  // 初始化
  init () {
    this.initEvent()
    this.createRouterMap()
    this.initConmponent(_Vue)
  }

  // 监听 changehash 事件
  initEvent () {
    // 监听 load 事件，将this指向这个类的实例
    window.addEventListener('load', this.onHashChange.bind(this))
    // 监听 hashchange 将this指向这个类的实例
    window.addEventListener('hashchange', this.onHashChange.bind(this))
  }

  // 改变路由地址
  onHashChange () {
    this.data.current = window.location.hash.substr(1) || ''
  }

  // 解析路由配置
  createRouterMap () {
    this.options.forEach(route => {
      this.routeMap[route.path] = route.component
    })
  }

  // 创建全局组件 router-link router-view
  initConmponent (Vue) {
    Vue.component('router-link', {
      props: { to: String },
      render (h) {
        return h('a', { attrs: { href: '#' + this.to } }, [this.$slots.default])
      }
    })
    Vue.component('router-view', {
      render: h => {
        const component = this.routeMap[this.data.current]
        return h(component)
      }
    })
  }
}
